<template>
  <div id="threeBox"></div>
</template>

<script setup>
import { onMounted } from 'vue'
// 引入Three.js
import * as THREE from 'three'
// 引入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 定义宽度和高度
const width = innerWidth
const height = innerHeight
// 创建场景
const scene = new THREE.Scene()
// 创建相机
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 3000)
// 设置相机位置
camera.position.set(200, 200, 200)
// 设置相机朝向
camera.lookAt(0, 0, 0)
// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器尺寸
renderer.setSize(width, height)
//创建一个长方体几何体
const geometry = new THREE.BoxGeometry(100, 100, 100)
//创建一个材质
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
})
//创建模型对象，将几何体与材质作为参数传入
const mesh = new THREE.Mesh(geometry, material)
// 将模型添加到场景中
scene.add(mesh)
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 监听轨道控制器的改变，并在改变后重新渲染
controls.addEventListener('change', (e) => {
  renderer.render(scene, camera)
})
// 渲染Canvas画布，将场景和相机作为参数传入
renderer.render(scene, camera)
// 页面挂载完毕后将domElement插入到页面元素内
onMounted(() => {
  document.getElementById('threeBox').appendChild(renderer.domElement)
})
</script>

<style scoped>
#threeBox {
  width: 100%;
  height: 100%;
}
</style>
